<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="utf-8" />
	<title>Andronotes - User Home</title>

	<link rel="stylesheet" href="{views_url}css/style.css" />
	<link rel="stylesheet" href="{views_url}css/dock.css" />
	<link type='text/css' href='{views_url}css/userhome.css' rel='stylesheet' media='screen' />

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
	<![endif]-->

	<!-- Load JavaScript files -->
	<script type='text/javascript' src='{views_url}js/jquery.js'></script>
	<script type='text/javascript' src='{views_url}js/jquery.simplemodal.js'></script>
	<script type='text/javascript' src='{views_url}js/userhome.js'></script>
	<script type='text/javascript'>
		
		function prepareToEdit(evnt) {
			evnt.preventDefault();

			var url = '{base_url}notas/borrar/' + jQuery(this).data("notaid") + '/';

			jQuery('#nota_id-edit').val(jQuery(this).data("notaid"));
			jQuery('#descripcion-edit').html(jQuery(this).data("descripcion"));
			jQuery('#titulo-edit').val(jQuery(this).data("titulo"));
			jQuery('#borrar').attr('href',url);
		} // getNotaByAJAX

		jQuery(document).ready(function() {
		    jQuery('a[data-editable=true]').on('click',prepareToEdit);  
		});
	</script>
</head>
<body>
	<div class="wrapper">
		<div class="example">
			<h2>Bienvenido {$usuario->email}</h2>
	
			<!-- Begin: CSS Dock Code -->
			<div class="dock">
				<ul>
					<li id="listnotes">
						<a href="#listnotes" class="osx-listnotes" >
							<em><span>Tus notas</span></em>
							<img src="{views_url}images/listnotes.png" alt="listnotes" />
						</a>
					</li>
					<li id="newnote">
						<a href="#newnote" class="osx-newnote" >
							<em><span>Crear una nota</span></em>
							<img src="{views_url}images/newnote.png" alt="newnote" />
						</a>
					</li>
					<li id="logout">
						<a href="{base_url}">
							<em><span>Salir</span></em>
							<img src="{views_url}images/logout.png" alt="logout" />
						</a>
					</li>
				</ul>
			</div>
			<!-- End: CSS Dock Code -->
		</div>
		
		<!-- modal content -->
		<div id="osx-modal-content-listnotes">
			<div id="osx-modal-title-listnotes">Tus notas</div>
			<div class="close"><a href="#" class="simplemodal-close">x</a></div>
			<div id="osx-modal-data-listnotes" class="listingnotes">
				<form method="post" action="{base_url}notas/guardar/">
					<input id="usuario_id-edit" name="usuario_id-edit" type="hidden" value="{$usuario->id}" />
					<input id="nota_id-edit" name="nota_id-edit" type="hidden" value="" />
					<label for="titulo-edit" >Título</label>
					<br />
					<input class="text" id="titulo-edit" name="titulo-edit" value=""/>
					<label for="descripcion-edit" >Texto</label>
					<br />
					<textarea class="text" id="descripcion-edit" name="descripcion-edit"></textarea>
					<a id="borrar" name="borrar" href="#" class="button button-delete">Borrar nota</a>
					<input class="button" type="submit" value="Guardar cambios" data-save="true"/>
				</form>
				<hr />
				<ul>
					{foreach from=$usuario->notas item="nota"}
					<li>
						<a href="#" data-editable="true" data-notaid="{$nota->id}" data-titulo="{$nota->titulo}" data-descripcion="{$nota->descripcion}">
							<em><span>{$nota->titulo}</span></em>
							<img src="{views_url}images/anote.png" alt="Nota" />
						</a>
					</li>
					{/foreach}
				</ul>
			</div>
		</div>	
		
		<!-- modal content -->
		<div id="osx-modal-content-newnote">
			<div id="osx-modal-title-newnote">Nueva nota</div>
			<div class="close"><a href="#" class="simplemodal-close">x</a></div>
			<div id="osx-modal-data-newnote">
				<form method="post" action="{base_url}notas/crear/">
					<input id="usuario_id" name="usuario_id" type="hidden" value="{$usuario->id}" />
					<label for="title" >Título</label>
					<br />
					<input class="text" id="titulo" name="titulo" value=""/>
					<label for="text" >Texto</label>
					<br />
					<textarea class="text" id="descripcion" name="descripcion"></textarea>
					<input class="button" type="submit" value="Crear nota"/>
				</form>
			</div>
		</div>

	</div>
</body>
</html>